<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本用法</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        function f1() {
            console.log("Hello World");
        }

        // DOM版(原生js版)
        // 在DOM中,通过window.onload表示页面加载之后
        // window.onload = function(){
        //     document.getElementById("btn").onclick = function(){
        //         console.log("动态绑定");
        //     }
        // }

        // jquery版
        // 在jquery中,页面加载的文档级,即加载的是document
        // ready(fn):表示页面加载之后执行的函数fn
        // ready函数是jquery函数,必须由jquery对象调用
        // document属于DOM对象,必须进行转换
        // DOM对象无法访问jquery函数,想要访问必须转换
        // DOM对象 --> jquery对象   $(DOM对象)
        // $(document).ready(function(){
        //     // document.getElementById("btn").onclick = function(){
        //     //     console.log("动态绑定");
        //     // }
        //     // 在jquery中,简化了js的方法
        //     // 对于查询节点的方法可以直接通过$(选择器)来实现
        //     $("#btn").click(function(){
        //         // console.log("动态绑定");
        //         // console.log(document.getElementById("btn").innerHTML);
        //         // console.log(this.innerHTML);
        //         // 此时的this表示的是DOM对象
        //         // console.log(this.html());
        //         // console.log($(this).html());
        //         // console.log($("#btn").html());
        //         // $(this).html("我修改了")
        //         // jquery对象也无法访问DOM函数,想要访问必须转换
        //         // console.log($("#btn").innerHTML);
        //         // jquery对象 --> DOM对象,两种方式
        //         // 1.jquery对象[0]    建议使用
        //         // 2.jquery对象.get(0)
        //         console.log($("#btn")[0].innerHTML);
        //         console.log($("#btn").get(0).innerHTML);
        //     })
        // })

        // 最终简化版
        // $(document).ready(fn) 简化为 $(fn)
        $(function () {
            $("#btn").click(function () {
                $(this).html("我修改了");
            });
        })
    </script>
</head>
<body>
<button onclick="f1()">静态绑定</button>
<button id="btn">动态绑定</button>
</body>
</html>